import { useMemo } from 'react'
import { useSelector } from 'react-redux'
import { themes } from '@/pages/bi-core/utils/const'

function useTheme() {
  const { chart } = useSelector((state) => state.core.globalValue || {})

  const theme = useMemo(() => {
    const { textColor, textColorSecondary, lineColor, fontSize } = (() => ({
      textColor: '#1e2226',
      textColorSecondary: '#8a9099',
      lineColor: '#e9ecf0',
      fontSize: 12
    }))()
    const axisCommon = () => ({
      axisLine: {
        lineStyle: {
          color: lineColor
        }
      },
      axisTick: {
        lineStyle: {
          color: lineColor
        }
      },
      axisLabel: {
        color: textColorSecondary
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: lineColor
        }
      }
    })
    const { colors } = themes.find((v) => v.value === chart?.theme || 'rainbow')
    return {
      color: colors,
      legend: {
        type: 'scroll',
        itemWidth: 18,
        itemHeight: 10
      },
      grid: {
        containLabel: true
      },
      valueAxis: axisCommon(),
      categoryAxis: axisCommon(),
      dataZoom: {
        backgroundColor: '#f0f2f5',
        textStyle: {
          color: textColorSecondary
        }
      },
      tooltip: {
        axisPointer: {
          type: 'none'
        }
      },
      textStyle: {
        color: textColor,
        fontSize
      }
    }
  }, [chart])

  return theme
}

export default useTheme
